import React from "react";
import { Graph } from "@antv/x6";
import { Input, Checkbox, Select, Slider, Card, Row, Col } from "antd";
import "antd/dist/antd.css";

export interface Props {
    onChange: (res: Graph.BackgroundManager.Options) => void;
}

export interface State {
    color: string;
    showImage: boolean;
    repeat: string;
    position: string;
    size: string;
    opacity: number;
    angle?: number;
}

const bgImageDataURL =
    "";

export class Settings extends React.Component<Props, State> {
    state: State = {
        color: "#f0f0f0",
        showImage: false,
        repeat: "no-repeat",
        position: "center",
        size: "auto auto",
        opacity: 1,
        angle: 20
    };
    tryToJSON(val: string) {
        try {
            return JSON.parse(val);
        } catch (error) {
            return val;
        }
    }

    notifyChange() {
        const { showImage, size, position, ...state } = this.state;
        this.props.onChange({
            ...state,
            image: showImage ? bgImageDataURL : undefined,
            size: this.tryToJSON(size),
            position: this.tryToJSON(position)
        });
    }

    onColorChanged = (e: any) => {
        this.setState({ color: e.target.value }, () => {
            this.notifyChange();
        });
    };

    onShowImageChanged = (e: any) => {
        this.setState({ showImage: e.target.checked }, () => {
            this.notifyChange();
        });
    };

    onRepeatChanged = (repeat: string) => {
        this.setState({ repeat }, () => {
            this.notifyChange();
        });
    };

    onPositionChanged = (position: string) => {
        this.setState({ position }, () => {
            this.notifyChange();
        });
    };

    onSizeChanged = (size: string) => {
        this.setState({ size }, () => {
            this.notifyChange();
        });
    };

    onOpacityChanged = (opacity: number) => {
        this.setState({ opacity }, () => {
            this.notifyChange();
        });
    };

    onWaterAngleChanged = (angle: number) => {
        this.setState({ angle }, () => {
            this.notifyChange();
        });
    };

    render() {
        return (
            <Card
                title="Background Settings"
                size="small"
                bordered={false}
                style={{ width: 320 }}
            >
                <Row align="middle">
                    <Col span={6}>Color</Col>
                    <Col span={14}>
                        <Input
                            type="color"
                            value={this.state.color}
                            style={{ width: "100%" }}
                            onChange={this.onColorChanged}
                        />
                    </Col>
                </Row>
                <Row align="middle">
                    <Col span={18} offset={6}>
                        <Checkbox
                            checked={this.state.showImage}
                            onChange={this.onShowImageChanged}
                        >
                            Show Background Image
                        </Checkbox>
                    </Col>
                </Row>
                {this.state.showImage && (
                    <React.Fragment>
                        <Row align="middle">
                            <Col span={6}>Repeat</Col>
                            <Col span={14}>
                                <Select
                                    style={{ width: "100%" }}
                                    value={this.state.repeat}
                                    onChange={this.onRepeatChanged}
                                >
                                    <Select.Option value="no-repeat">no repeat</Select.Option>
                                    <Select.Option value="repeat">repeat</Select.Option>
                                    <Select.Option value="repeat-x">repeat x</Select.Option>
                                    <Select.Option value="repeat-y">repeat y</Select.Option>
                                    <Select.Option value="round">round</Select.Option>
                                    <Select.Option value="space">space</Select.Option>
                                    <Select.Option value="flipX">flip x</Select.Option>
                                    <Select.Option value="flipY">flip y</Select.Option>
                                    <Select.Option value="flipXY">flip xy</Select.Option>
                                    <Select.Option value="watermark">watermark</Select.Option>
                                </Select>
                            </Col>
                        </Row>
                        {this.state.repeat === "watermark" && (
                            <Row align="middle">
                                <Col span={16} offset={6} style={{ fontSize: 12 }}>
                                    Watermark Angle
                                </Col>
                                <Col span={14} offset={6}>
                                    <Slider
                                        min={0}
                                        max={360}
                                        step={1}
                                        value={this.state.angle}
                                        onChange={this.onWaterAngleChanged}
                                    />
                                </Col>
                                <Col span={2}>
                                    <div className="slider-value">{this.state.angle}</div>
                                </Col>
                            </Row>
                        )}
                        <Row align="middle">
                            <Col span={6}>Position</Col>
                            <Col span={14}>
                                <Select
                                    style={{ width: "100%" }}
                                    value={this.state.position}
                                    onChange={this.onPositionChanged}
                                >
                                    <Select.Option value="center">center</Select.Option>
                                    <Select.Option value="left">left</Select.Option>
                                    <Select.Option value="right">right</Select.Option>
                                    <Select.Option value="top">top</Select.Option>
                                    <Select.Option value="bottom">bottom</Select.Option>
                                    <Select.Option value="50px 50px">50px 50px</Select.Option>
                                    <Select.Option value={JSON.stringify({ x: 50, y: 50 })}>
                                        {`{ x: 50, y: 50 }`}
                                    </Select.Option>
                                </Select>
                            </Col>
                        </Row>
                        <Row align="middle">
                            <Col span={6}>Size</Col>
                            <Col span={14}>
                                <Select
                                    style={{ width: "100%" }}
                                    value={this.state.size}
                                    onChange={this.onSizeChanged}
                                >
                                    <Select.Option value="auto auto">auto auto</Select.Option>
                                    <Select.Option value="cover">cover</Select.Option>
                                    <Select.Option value="contain">contain</Select.Option>
                                    <Select.Option value="30px 30px">30px 30px</Select.Option>
                                    <Select.Option value="100% 100%">100% 100%</Select.Option>
                                    <Select.Option
                                        value={JSON.stringify({ width: 50, height: 50 })}
                                    >
                                        {`{width: 50, height: 50 }`}
                                    </Select.Option>
                                </Select>
                            </Col>
                        </Row>
                        <Row align="middle">
                            <Col span={6}>Opacity</Col>
                            <Col span={14}>
                                <Slider
                                    min={0.05}
                                    max={1}
                                    step={0.05}
                                    value={this.state.opacity}
                                    onChange={this.onOpacityChanged}
                                />
                            </Col>
                            <Col span={2}>
                                <div className="slider-value">
                                    {this.state.opacity.toFixed(2)}
                                </div>
                            </Col>
                        </Row>
                    </React.Fragment>
                )}
            </Card>
        );
    }
}
